<template>
  <div class="components-input-demo-presuffix">
    <a-select @dropdownVisibleChange="openModal" :disabled="disabled" :open="false" placeholder="请进行计划类型配置" v-model="cron">
      <a-icon slot="prefix" type="schedule" title="corn控件"/>
      <a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
      <a-select-option :value="cron">
        {{this.cyclePlan}}
      </a-select-option>
    </a-select>
    <PlanTypeModal ref="innerVueCron" :data="cron" @ok="handleOK"></PlanTypeModal>
  </div>
</template>
<script>
  import PlanTypeModal from "./modules/PlanTypeModal";

  export default {
    name: 'JCron',
    components: {
      PlanTypeModal
    },
    props: {
      value: {
        required: false,
        type: String,
      },
      disabled: Boolean,
    },
    data() {
      return {
        cron: this.value,
        cyclePlan: "",
        weekArray: [],
        type:0,
      }
    },
    watch: {
      value(val) {
        this.cron = val;
        this.initValue();
      }
    },
    methods: {
      openModal() {
        if(!this.disabled){
          this.$refs.innerVueCron.show();
        }

      },
      initValue(){
        let days = this.cron.split(" ")[0];
        let weeks = this.cron.split(" ")[1];
        if(this.cron=='- -'){
          this.cyclePlan = "临时"
          this.type=0;
        }else if (!days.includes('?') && !days.includes('*')) {
          this.cyclePlan = "每月" + days + "日";
          this.type=3;
        } else if (!weeks.includes('?')) {
          this.weekArray = weeks.split(',');
          this.cyclePlan ="";
          for (let i = 0; i < this.weekArray.length; i++) {
            if (this.weekArray[i] == "1") {
              this.cyclePlan = this.cyclePlan + "天,";
            } else if (this.weekArray[i] == "2") {
              this.cyclePlan = this.cyclePlan + "一,";
            } else if (this.weekArray[i] == "3") {
              this.cyclePlan = this.cyclePlan + "二,";
            } else if (this.weekArray[i] == "4") {
              this.cyclePlan = this.cyclePlan + "三,";
            } else if (this.weekArray[i] == "5") {
              this.cyclePlan = this.cyclePlan + "四,";
            } else if (this.weekArray[i] == "6") {
              this.cyclePlan = this.cyclePlan + "五,";
            } else if (this.weekArray[i] == "7") {
              this.cyclePlan = this.cyclePlan + "六,";
            }
          }
          this.cyclePlan = "每周星期" + this.cyclePlan;
          this.cyclePlan = this.cyclePlan.substring(0,this.cyclePlan.length-1);
          this.type=2;
        } else if(this.cron=='* ?'){
          this.cyclePlan = "每日"
          this.type=1;
        }

      },
      handleOK(val,type) {
        this.type=type;
        this.cron = val;
        this.initValue();
        this.$emit("type", this.type);
        this.$emit("change", this.cron);
      },
      handleEmpty() {
        this.handleOK();
        this.initValue();
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }

  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }

  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>
